<template>
  <div class="container">
    <div class="head">
      <h3>条件筛选</h3>
      <el-card class="box-card">
        <el-date-picker clearable
                        v-model="queryParams.liveTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        @change="getDay"
                        placeholder="请选择入住时间">
        </el-date-picker>
        <span style="margin-left: 15px;margin-right: 15px;color: grey">{{ dwellingDay }}晚</span>
        <el-date-picker clearable
                        v-model="queryParams.leaveTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        @change="getDay"
                        placeholder="请选择离店时间">
        </el-date-picker>
        <el-select v-model="queryParams.type" @change="listDataApi()" placeholder="请选择房间类型" clearable
                   style="margin-left: 15px">
          <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-card>
    </div>
    <div class="content">
      <h3>房间类型</h3>
      <el-card class="box-card" v-for="item in roomList" :key="item.id" style="margin-top: 5px">
        <el-row>
          <el-col :span="6" style="text-align: center;border-right: 1px grey solid">
            <el-image :src="item.pic[0]" style="width: 150px;height: 80px;"></el-image>
            <p style="font-weight: bold;font-size: 14px">{{ item.typeName }}</p>
            <p>{{ item.bedInfo }} | {{ item.roomSize }}m² | {{ item.peopleNum }}人</p>
            <p style="color: #0189ec;cursor: pointer"  @click="getDetail(item.id)">查看客房信息</p>
          </el-col>
          <el-col :span="12" style="border-right: 1px grey solid;padding-left: 20px;padding-right: 20px">
            <p style=""><span style="font-weight: bold">便利设施:</span>{{ item.amenity }}</p>
            <p style=""><span style="font-weight: bold;margin-top: 5px">浴室配套:</span>{{ item.bathroomAccessory }}</p>
            <p style=""><span style="font-weight: bold;margin-top: 5px">洗浴用品:</span>{{ item.bathingSupply }}</p>
          </el-col>
          <el-col :span="3" style="padding-left: 50px;padding-top: 40px">
            <p style="font-size: 24px;font-weight: bold;color: #0189ec">￥{{ item.roomPrice }}</p>
          </el-col>
          <el-col :span="3" style="padding-top: 60px">
            <el-button type="success" round @click="advance(item)">预订</el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="foot">
      <h3>酒店政策</h3>
      <el-card class="box-card">
        <el-row style="border-bottom: 1px grey solid;height: auto">
          <el-col :span="6">
            <h4>订房必读</h4>
          </el-col>
          <el-col :span="18">
            <p>为贯彻落实《上海市生活垃圾管理条例》相关规定，推进生活垃圾源头减量，上海市文化和旅游局特制定《关于本市旅游住宿业不主动提供客房一次性日用品的实施意见》，2019年7月1日起，上海市旅游住宿业将不再主动提供牙刷、梳子、浴擦、剃须刀、指甲锉、鞋擦这些一次性日用品。若需要可咨询酒店。</p>
          </el-col>
        </el-row>
        <el-row style="border-bottom: 1px grey solid;height: auto " >
          <el-col :span="6">
            <h4>入住及退房</h4>
          </el-col>
          <el-col :span="18">
            <p >入住时间： 12:00后       退房时间： 12:00前</p>
          </el-col>
        </el-row>
        <el-row style="border-bottom: 1px grey solid;height: auto">
          <el-col :span="6">
            <h4>入住方式</h4>
          </el-col>
          <el-col :span="18">
            <p>请到前台领取钥匙/门卡</p>
          </el-col>
        </el-row>
        <el-row style="border-bottom: 1px grey solid;height: auto">
          <el-col :span="6">
            <h4>早餐</h4>
          </el-col>
          <el-col :span="18">
            <p>早餐类型:西式, 中式</p>
            <p>菜单类型自助餐</p>
            <p>费用¥58.00 每位</p>
            <p>营业时间07:00-09:30 [星期一 - 星期日]</p>
          </el-col>
        </el-row>
        <el-row style="border-bottom: 1px grey solid;height: auto">
          <el-col :span="6">
            <h4>宠物</h4>
          </el-col>
          <el-col :span="18">
            <p>不可携带宠物。</p>
          </el-col>
        </el-row>
        <el-row style="border-bottom: 1px grey solid;height: auto">
          <el-col :span="6">
            <h4>年龄限制</h4>
          </el-col>
          <el-col :span="18">
            <p>不允许18岁以下单独办理入住</p>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <el-dialog
        :title="roomDetail.typeName"
        :visible.sync="open"
        :fullscreen="true"
    style="background-color: black">
      <el-row>
        <el-col :span="15">
          <el-carousel :interval="2500" arrow="always" height="600px">
            <el-carousel-item v-for="url in roomDetail.pic" :key="url">
              <el-image :src="url"></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :span="9">
          <el-card class="box-card">
            <h2>基础信息</h2>
            <p><span style="font-weight: bold">房间大小:</span><span>{{roomDetail.roomSize}}m²</span></p>
            <p><span style="font-weight: bold">床位信息:</span><span>{{roomDetail.bedInfo}}</span></p>
            <p><span style="font-weight: bold">可住人数:</span><span>{{roomDetail.peopleNum}}</span></p>
            <h2>全部设施</h2>
            <p><span style="font-weight: bold">便利设施:</span><span>{{roomDetail.amenity}}</span></p>
            <p><span style="font-weight: bold">浴室配套:</span><span>{{roomDetail.bathroomAccessory}}</span></p>
            <p><span style="font-weight: bold">洗浴用品:</span><span>{{roomDetail.bathingSupply}}</span></p>
            <p><span style="font-weight: bold">是否提供wifi:</span><span>{{roomDetail.wifi}}</span></p>
            <p><span style="font-weight: bold">是否有窗:</span><span>{{roomDetail.casement}}</span></p>
            <p><span style="font-weight: bold">是否可吸烟:</span><span>{{roomDetail.smoke}}</span></p>
            <p><span style="font-weight: bold">是否包含早餐:</span><span>{{roomDetail.breakfast}}</span></p>
            <p><span style="font-weight: bold">食品饮品:</span><span>{{roomDetail.food}}</span></p>
            <p><span style="font-weight: bold">媒体科技:</span><span>{{roomDetail.media}}</span></p>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="40%">
      <el-form ref="form" :model="form" :rules="rules"  label-width="180px">
        <el-form-item label="入住时间" prop="liveTime">
          <el-date-picker clearable
                          v-model="form.liveTime"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          @change="getDay2"
                          placeholder="请选择入住时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="离店时间" prop="leaveTime">
          <el-date-picker clearable
                          v-model="form.leaveTime"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          @change="getDay2"
                          placeholder="请选择离店时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="居住天数" prop="dwellingDay">
          <el-input v-model="form.dwellingDay" placeholder="请输入居住天数" disabled/>
        </el-form-item>
        <el-form-item label="订单价格" prop="orderPrice">
          <el-input v-model="form.orderPrice" placeholder="请输入订单价格"  disabled/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submit()">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>


<script>
import {addRoomOrder, getRoom, listRoom} from "@/utils/request";
import {Message} from "element-ui";

export default {
  name: "Room",
  data() {
    return {
      roomList: [],
      open:false,
      dialogVisible:false,
      roomDetail:{},
      form: {},
      queryParams: {
        type: null,
        leaveTime: null,
        liveTime: null
      },
      typeList: [{
        value: 1,
        label: '豪华大床房'
      }, {
        value: 2,
        label: '豪华标准间'
      }, {
        value: 3,
        label: '套房'
      }, {
        value: 4,
        label: '家庭房'
      }, {
        value: 5,
        label: '大床房'
      }, {
        value: 6,
        label: '普通标间'
      }, {
        value: 7,
        label: '钟点房'
      }],
      dwellingDay: 0,
      rules: {
        liveTime: [
          { required: true, message: "入住时间不能为空", trigger: "blur" }
        ],
        leaveTime: [
          { required: true, message: "离店时间不能为空", trigger: "blur" }
        ],
        dwellingDay: [
          { required: true, message: "居住天数不能为空", trigger: "blur" }
        ],
        orderPrice: [
          { required: true, message: "订单价格不能为空", trigger: "blur" }
        ],
      }
    }
  },
  methods: {
    listDataApi() {
      listRoom(this.queryParams).then(res => {
        if (res.code == 200) {
          this.roomList = res.data;
          this.$forceUpdate()
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      })
    },
    advance(row){
      // this.form.liveTime = this.queryParams.liveTime
      // this.form.leaveTime = this.queryParams.leaveTime
      // this.form.dwellingDay = this.dwellingDay
      this.form.type = row.type
      this.form.roomId = row.id
      // this.form.orderPrice = (new Number(row.roomPrice) * this.dwellingDay).toString();
      this.dialogVisible = true
    },
    submit(){
      addRoomOrder(this.form).then(response => {
        Message.success("预订成功");
        this.dialogVisible = false;
        this.listDataApi()
      });
    },
    getDay() {
      let leave = this.queryParams.leaveTime;
      let live = this.queryParams.liveTime;
      if (live != null && leave != null) {
        let leaveDay = new Date(leave);
        let liveDay = new Date(live);
        let differDay = Math.round((leaveDay - liveDay) / 1000 / 60 / 60 / 24);
        this.dwellingDay = differDay;
        this.$forceUpdate()
        this.listDataApi()
      }
    },
    getDay2() {
      let leave = this.form.leaveTime;
      let live = this.form.liveTime;
      if (live != null && leave != null) {
        let leaveDay = new Date(leave);
        let liveDay = new Date(live);
        let differDay = Math.round((leaveDay - liveDay) / 1000 / 60 / 60 / 24);
        this.form.dwellingDay = differDay;
        let arr = this.roomList.filter(item=>item.id == this.form.roomId);
        this.form.orderPrice = (differDay * new Number(arr[0].roomPrice)).toString();
        this.$forceUpdate()
      }
    },
    getDetail(id) {
      getRoom(id).then(res =>{
        this.roomDetail=res.data
      })
      this.open=true
    },
  },
  created() {
    this.queryParams.liveTime = new Date();
    const date = new Date();
    date.setTime(date.getTime() + 3600 * 1000 * 24);
    this.queryParams.leaveTime = date;
    this.getDay()
    // this.listDataApi();
  },
}
</script>

<style scoped lang='scss'>
.container {
  width: 80%;
  margin-left: 10%;
  height: auto+100px;
}
.drawer_pwd {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  margin: 0;
  .el-drawer {
    width: 800px !important;
  }
}


</style>
